<template>
  <li class="goods-wrapper">
    <div class="img-box">{{ info.icon }}</div>
    <p class="goods-name">{{ info.name }}</p>
    <div class="goods-price">
      <span>￥</span><span class="price">{{ info.price }}</span>
    </div>
    <Counter :maxCount="info.maxCount"
      :increment="incrementCount"
      :decrement="decrementCount"
      :getCartGoodsCount="getCartGoodsCount"
    />
    <div class="btn"
      @click="pushGoods({...info, isChecked: false, count, totalPrice: getTotalPrice(info.price)})"
        title="加入购物车"
        :class="isInCart ? 'add-btn' : 'dis-btn'"
      >{{isInCart ? '加入购物车' : '已加入购物车'}}
    </div>
  </li>
</template>

<script>
import Counter from './Counter'
import { mapMutations, mapState } from 'vuex'

export default {
  name: 'Card',
  components: {
    'Counter': Counter
  },
  props: {
    'info': {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      count: 1
    }
  },
  computed: {
    ...mapState({
      cartGoodsList: 'cartGoodsList'
    }),
    // 判断这个商品是不是已经在购物车里了
    isInCart () {
      let { cartGoodsList, info } = this
      let idx = cartGoodsList.findIndex(goods => goods.id === info.id)
      return idx === -1
    },
    // 从购物车里获取到该商品的购买数量
    getCartGoodsCount () {
      let { cartGoodsList, info, count } = this
      let goods = cartGoodsList.find(goods => goods.id === info.id)
      return goods ? goods.count : count
    }
  },
  methods: {
    ...mapMutations(['pushGoods', 'increment', 'decrement']),
    incrementCount (maxCount) {
      let { isInCart, increment, info: { id } } = this
      if (!isInCart) {
        increment(id)
      } else {
        if (this.count < maxCount) this.count += 1
      }
    },
    decrementCount () {
      let { isInCart, decrement, info: { id } } = this
      if (!isInCart) { // 先判断一下该商品有没有在购物车里
        // 如果在购物车里，就直接更新购物车里的 count 数据
        // 更新后会触发 getCartGoodsCount 函数，这时商品列表的 count 也就更新了
        decrement(id)
      } else {
        if (this.count > 1) this.count -= 1
      }
    },
    getTotalPrice (price) {
      return Number((this.count * price).toFixed(2))
    }
  }
}
</script>

<style lang='scss'>
  .goods-wrapper{
      float: left;
      padding: 10px;
      width: 160px;
      height: 240px;
      cursor: pointer;
      margin: 12px;
      text-align: center;
      font-size: 14px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      outline: 1px solid #eeeeee;
      &:hover{
        outline: 1px solid #f22;
      }
      .img-box{
        font-size: 60px;
      }
      .goods-price{
        span{
          color: #f24;
          &.price{
            font-weight: 600;
            font-size: 20px;
          }
        }
      }
      .btn{
        color: white;
        padding: 4px 0;
        border-radius: 10px;
        font-weight: 600;
      }
      .add-btn{
        background: #f24;
        transition: background-color .5s;
        &:hover{
          background-color: #f22;
        }
      }
      .dis-btn{
        background-color: rgba(255,34,34,.4);
      }
  }
</style>
